import React from 'react';
import {Link} from 'react-router-dom'
import {Menu, Icon, Switch, Layout,message} from 'antd'
import Top from './header'
import Contents from './content'
import Footer from './bottom'
import './index.less'
import BreadcrumbCustom from "../components/BreadcrumbCustom";
import {PATH} from "../utils/urls";
import axios from 'axios';

const SubMenu = Menu.SubMenu;
const {Sider} = Layout

export default class Container extends React.Component {
    state = {
        theme: 'dark',
        current: 'index',
        collapsed: false,
        mode: 'inline',  // 水平垂直展现
        menuTreeNode:"",
        allMenuList:[]//菜单列表
    }

    componentWillMount() {
        //获取菜单列表
        this.getMenu();
    }

    /**
     * 获取权限菜单
     * @returns {*}
     */
    getMenu(){
        axios.get(PATH.getMenu,{})
            .then(response=>{
                console.log(response);
                if(response.data.code == 0){
                    this.state.allMenuList = response.data.data.menuList;
                    const menuTreeNode = this.renderMenu(this.state.allMenuList);
                    this.setState({
                        menuTreeNode
                    })
                }else{
                    message.error(response.data.msg);
                }
            })
    }

    componentDidMount() {
        this.handleClick([], 'index')
    }

    changeTheme = (value) => {
        this.setState({
            theme: value ? 'dark' : 'light',
        });
    }
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
            mode: this.state.collapsed ? 'inline' : 'vertical',
        });
    }
    clear = () => {
        this.setState({
            current: 'index',
        });
    }
    handleClick = (e, special) => {
        this.setState({
            current: e.key || special,
        });
    }

    renderMenu = (allMenu) => {
        return allMenu.map((subMenu) => {
            if (subMenu.children && subMenu.children.length) {
                return (
                    <SubMenu key={subMenu.url} title={<span><Icon
                        type={subMenu.icon}/><span>{subMenu.menuName}</span></span>}>
                        { this.renderMenu(subMenu.children) }
                    </SubMenu>
                )
            }
            return (
                <Menu.Item key={subMenu.url}>
                    <Link to={`/${subMenu.url}`}>
                        <Icon type={subMenu.icon}/><span className="nav-text">{subMenu.menuName}</span>
                    </Link>
                </Menu.Item>
            )
        })
    }

    render() {
        return (
            <Layout className="containAll">
                <Sider
                    collapsible
                    collapsed={this.state.collapsed}
                    onCollapse={this.onCollapse}
                    className="leftMenu"
                >
                    {this.state.theme === 'light' ? <span className="author">运维监控系统</span> :
                        <span className="author white">运维监控系统</span>}
                    <Menu
                        theme={this.state.theme}
                        onClick={this.handleClick}
                        defaultOpenKeys={['']}
                        selectedKeys={[this.state.current]}
                        className="menu"
                        mode={this.state.mode}
                    >
                        {this.state.menuTreeNode}
                    </Menu>
                </Sider>
                <Layout>
                    <Top toggle={this.toggle} collapsed={this.state.collapsed} clear={this.clear}/>
                    <Contents/>
                    {/*<Footer />*/}
                </Layout>
            </Layout>
        );
    }
}